/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class="template-content">
    <div class="template-header"></div>
    <div class="template-main">
      <div class='detail'>
        <!-- 第一部分 -->
        <div class='section'>
          <img class='image' src='../assets/back.png' id='back' @click='close' />
          <input type='text' class='search-bar' placeholder='搜索...' />
          <img class='image' src='../assets/msg_big.png' />
        </div>

        <!-- 第二部分：轮播图 -->
        <div class='carousel'>
          <div class='carousel-images'>
            <img src='../assets/classify_banner1.png' alt='轮播图1' />
            <img src='../assets/classify_banner2.png' alt='轮播图2' />
            <img src='../assets/classify_banner3.png' alt='轮播图3' />
          </div>
        </div>

        <!-- 第三部分：新品上市 -->
        <div class='product-section'>
          <h2>新品上市</h2>
          <div class='product-list'>
            <!-- 4个产品 -->
            <div class='product-item' @click='pageJump'>
              <img src='../assets/classify_product_1.png' alt='产品1' id='image' />
              <p>Mate 60 Pro+</p>
            </div>
            <div class='product-item' @click='pageJump'>
              <img src='../assets/classify_product_2.png' alt='产品2' />
              <p>Mate 60</p>
            </div>
            <div class='product-item' @click='pageJump'>
              <img src='../assets/classify_product_3.png' alt='产品3' />
              <p>Mate 60 Pro</p>
            </div>
            <div class='product-item' @click='pageJump'>
              <img src='../assets/classify_product_4.png' alt='产品4' />
              <p>Mate X5</p>
            </div>
          </div>
        </div>

        <!-- 第四部分：HUAWEI Mate系列 -->
        <div class='product-section'>
          <h2>HUAWEI Mate系列</h2>
          <div class='product-list'>
            <!-- 8个产品 -->
            <div class='product-item'>
              <img src='../assets/classify_product_1.png' alt='Mate系列产品1' />
              <p>Mate 60 Pro+</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_2.png' alt='Mate系列产品2' />
              <p>Mate 60</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_3.png' alt='Mate系列产品3' />
              <p>Mate 60 Pro</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_4.png' alt='Mate系列产品4' />
              <p>Mate X5</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_5.png' alt='Mate系列产品5' />
              <p>Mate X3</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_6.png' alt='Mate系列产品6' />
              <p>Mate 50</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_7.png' alt='Mate系列产品7' />
              <p>Mate 50 Pro</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_8.png' alt='Mate系列产品8' />
              <p>Mate Xs2</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_9.png' alt='Mate系列产品8' />
              <p>Mate 50E</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_10.png' alt='Mate系列产品8' />
              <p>Mate 50RS</p>
            </div>
          </div>
        </div>

        <!-- 第五部分：HUAWEI P系列 -->
        <div class='product-section'>
          <h2>HUAWEI P系列</h2>
          <div class='product-list'>
            <!-- 6个产品 -->
            <div class='product-item'>
              <img src='../assets/classify_product_1.png' alt='P系列产品1' />
              <p>P60</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_2.png' alt='P系列产品2' />
              <p>P60 Pro</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_3.png' alt='P系列产品3' />
              <p>P60 Art</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_4.png' alt='P系列产品4' />
              <p>P50 Pro</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_5.png' alt='P系列产品5' />
              <p>P50E</p>
            </div>
            <div class='product-item'>
              <img src='../assets/classify_product_6.png' alt='P系列产品6' />
              <p>P50 Pocket</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const pageJump = () => {
  router.push('detail_pay');
};
let intervalId;

onMounted(() => {
  // 轮播图功能
  let currentIndex = 0;
  const images = document.querySelectorAll('.carousel-images img');
  const totalImages = images.length;

  function moveCarousel() {
    currentIndex = (currentIndex + 1) % totalImages;
    nextTick(() => {
      const carouselImages = document.querySelector('.carousel-images');
      if (carouselImages) {
        carouselImages.style.transform = `translateX(-${currentIndex * 100}%)`;
      }
    });
  }

  intervalId = setInterval(moveCarousel, 3000); // 每3秒自动切换
});

onUnmounted(() => {
  clearInterval(intervalId);
});

function close() {
  window.webClass.close();
}
</script>

<style scoped>
.template-content {
  background-color: #f1f3f5;
}

.template-header {
  height: 30px;
  background-color: transparent;
}

.template-main {
  height: calc(100vh - 30px);
  overflow: scroll;
}

.detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

/* 第一部分：搜索栏和图片 */
.section {
  width: calc(90% + 20px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.search-bar {
  flex: 1;
  margin-left: 10px;
  margin-right: 10px;
  height: 40px;
  padding: 0 30px;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 16px;
  background-image: url('../assets/search.png'), url('../assets/icon_close.svg');
  background-position: left 10px center, right 10px center;
  background-size: 20px 20px, 15px 15px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  min-width: 0;
}

.image {
  width: 30px; /* 缩小到搜索栏高度的一半 */
  height: 30px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

/* 第二部分：轮播图 */
.carousel {
  width: calc(90% + 20px);
  height: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 10px;
}

.carousel-images {
  display: flex;
  transition: transform 0.5s ease-in-out;
  style: 'top: 0;';
}

.carousel-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 产品展示部分 */
.product-section {
  width: 90%;
  background-color: white;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
}

.product-section h2 {
  font-size: 16px;
  font-weight: 1000;
  margin-bottom: 10px;
  text-align: left;
}

/* 使用CSS Grid来实现九宫格布局 */
.product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 三列 */
  grid-gap: 10px; /* 格子间距 */
  grid-template-rows: auto; /* 行自适应 */
  justify-items: center; /* 内容居中 */
}

.product-item {
  width: 100%;
  text-align: center;
  margin: 0;
}

.product-item img {
  width: 100%; /* 保持图片宽度为父容器的100% */
  height: auto; /* 自动调整高度 */
  aspect-ratio: 1; /* 设置图片的宽高比为1，确保高度与宽度相等 */
  object-fit: cover; /* 保持图片的内容比例，并填满容器 */
  border-radius: 10px;
  display: block;
  margin-bottom: -15px;
}

.product-item p {
  font-size: 14px;
  margin-bottom: -5px;
}
</style>
